<template>
  <div class="wrap">
    <div class="content">
      <!--左侧工具栏-->
      <div ref="flowStencil" class="sider" />
      <div class="panel">
        <!--流程图工具栏-->
        <div class="toolbar">
          <template v-if="isReady">
            <tool-bar />
            <tool-bar-right v-model="operationType" />
          </template>
        </div>
        <!--流程图画板-->
        <div ref="flowContainer" class="x6-graph" />
      </div>
      <!--右侧工具栏-->
      <div class="config">
        <config-panel v-if="isReady" />
      </div>
    </div>
  </div>
</template>

<script>
import ConfigPanel from './components/ConfigPanel/index.vue'
import ToolBar from './components/ToolBar/index.vue'
import ToolBarRight from './components/ToolBarRight/index.vue'
import FlowGraph from './graph'
import data from './mock/data.json'

export default {
  name: 'Index',
  components: {
    ToolBar,
    ToolBarRight,
    ConfigPanel
  },
  data() {
    return {
      visible: false,
      isReady: false,
      operationType: 'move',
      graph: null,
      data
    }
  },
  mounted() {
    this.initGraph()
    this.parseData()
  },
  methods: {
    initGraph() {
      this.graph = FlowGraph.init({
        container: this.$refs.flowContainer,
        stencil: this.$refs.flowStencil
      })
      this.isReady = true
    },
    parseData() {
      this.graph.fromJSON(data)
    }
  },
  destroyed() {
    FlowGraph.destroy()
  },
  watch: {
    operationType(val) {
      if (this.graph) {
        const nodes = this.graph.getNodes()
        if (!nodes || nodes.length === 0) {
          return
        }
        switch (val) {
          case 'move':
            nodes.map((node) => node.attr('body/magnet', false))
            break
          case 'connect':
            nodes.map((node) => node.attr('body/magnet', true))
            break
          default:
            break
        }
      }
    }
  }
}
</script>

<style scoped lang="less">
@import './index.less';
</style>
